<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
      content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>设计器</title>

    <script src="./utils/vue-2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js">
    </script>
    <script src="./utils/vue-router-3.1.3/vue-router.min.js"></script>
    <script src="./utils/element-ui/index.js"></script>
    <script src="./utils/tinymce-5.3.2/tinymce.min.js"></script>

    <style>
      .pre-loader {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(50% - 32px);
        width: 64px;
        height: 64px;
        border-radius: 50%;
        perspective: 800px;
      }

      .pre-loader .inner {
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .pre-loader .inner.one {
        left: 0%;
        top: 0%;
        -webkit-animation: rotate-one 1s linear infinite;
        animation: rotate-one 1s linear infinite;
        border-bottom: 3px solid #bc9048;
      }

      .pre-loader .inner.two {
        right: 0%;
        top: 0%;
        -webkit-animation: rotate-two 1s linear infinite;
        animation: rotate-two 1s linear infinite;
        border-right: 3px solid #74aeff;
      }

      .pre-loader .inner.three {
        right: 0%;
        bottom: 0%;
        -webkit-animation: rotate-three 1s linear infinite;
        animation: rotate-three 1s linear infinite;
        border-top: 3px solid #caef74;
      }

      @keyframes rotate-one {
        0% {
          -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
          transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        }

        100% {
          -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
          transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        }
      }

      @keyframes rotate-two {
        0% {
          -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
          transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        }

        100% {
          -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
          transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        }
      }

      @keyframes rotate-three {
        0% {
          -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
          transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        }

        100% {
          -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
          transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        }
      }
    </style>

    <script>
      // 表单ID,存在则代表为更新操作
      var opFormId

      /**
       * id: 表单ID
       * op: 操作类型
       */
      var opParams = {}

      function init() {
        let search = window.location.search
        if (!search) return

        search = search.substring(1)

        if (!search) return

        search = search.split('&')

        if (search.length < 1) return

        for (let i = 0; i < search.length; i++) {
          let p = search[i]

          if (!p) return
          p = p.split('=')

          if (p.length === 2) {
            opParams[p[0]] = p[1]
          }

          if (p.length > 0 && p[0] == 'id') opFormId = p[1]
        }
      }

      init()

      /**
       * 向父页面发出消息，请求关闭子窗口
       */
      function closeMe() {
        top.postMessage({
          type: 'close',
          data: opParams.tab
        }, opParams.origin ? opParams.origin : opParams.baseUrl)
      }
    </script>

  </head>

  <body>
    <noscript>
      <strong>抱歉，javascript被禁用，请开启后重试。</strong>
    </noscript>
    <div id="app"></div>
    <div class="pre-loader" id="pre-loader">
      <div class="inner one"></div>
      <div class="inner two"></div>
      <div class="inner three"></div>
    </div>
  </body>

</html>
